<template>
    <div>
        <headNav title="通讯录"></headNav>
        <div class="list-con">

        
            <div v-for="item in list" :key="item.letter" class="letter-block">
                <div :id="id + item.letter" class="letter">{{item.letter}}</div>
                <div v-for="p in item.personList" :key="p.name" class="person">
                    
                    <img class="head" src="@/assets/img/weLiao/default_head.png" alt="">
                    <div class="info">
                        <div class="name">
                            {{p.name}}
                            <div class="teacher"> （老师）</div>
                        </div>

                    </div>
                </div>
            </div>

            <div class="letter-list">
                <div v-for="item in letterList" :key="item" 
                :class="{'active': curLetter == item}"
                @touchstart="startLetter(item)"
                @touchmove="moveLetter(item)"
                class="letter-item">{{item}}</div>
            </div>
        </div>
    </div>
</template>
<script>
import Vue from 'vue'
import headNav from '@/components/headNav/headNav'
import pinyin from '@/assets/js/pinyin.js'
Vue.use(pinyin)
export default {
    components: {
		headNav
    },
    data () {
        return {
            id: Math.random(),
            letterList: ['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'],
            curLetter: '',
            list: [],
            personList: [
                {name: '路奇'},
                {name: '张飞'},
                {name: '赵云'},
                {name: '李典'},
                {name: '妲己'},
                {name: '王昭君'},
                {name: '典韦'},
                {name: '亚瑟'},
                {name: '伽罗'},
                {name: '黄总'},
                {name: '顿时'},
                {name: '马超'},
                {name: '阿里'},
                {name: '凯'},
                {name: '韩星'},
                {name: '夏洛'},
                {name: '后裔'},
            ]
        }
    },
    methods: {
        createList () {
            for (var item of this.personList) {
              
                var letter = this.pinyin.getCamelChars(item.name)

                var index = -1
                for (var i = 0; i<this.list.length; i++ ) {
                    var tem = this.list[i]
                    if (tem.letter == letter) {
                        index = i
                    }
                }
                if (index == -1) {
                    this.list.push({
                        letter: letter,
                        personList: [item]
                    })
                } else {
                    this.list[index].personList.push(item)
                }
            }

            this.list.sort((a, b) => {
                return a.letter.localeCompare(b.letter)
            })
            
        },
        startLetter (letter) {
            console.log('start:' + letter)
            this.curLetter = letter
            var el = document.getElementById(this.id + letter)
            if (el) {
                el.scrollIntoView()
                console.log(el.offsetTop)
            }
            
        },
        moveLetter (letter) {
            console.log('move:' + letter)
        }
    },
    mounted () {
        this.createList()
    }
}
</script>
<style scoped>
.list-con{
    height: calc(100% - 0.88rem); overflow-y: scroll;
}
.letter-block{
   
}
.letter{
     height: 0.54rem; line-height: 0.54rem; padding: 0 0.32rem;
    color: #777777; font-size: 0.24rem;
}
.person{
    height: 1.04rem; background: #fff; box-sizing: border-box;
    font-size: 0;
}

.head{
    display: inline-block;vertical-align: middle; height: 0.7rem; widows: 0.7rem;
    padding: 0 0.2rem 0 0.32rem; 
}
.info{
    display: inline-block;vertical-align: middle; height: 100%;width: 5.9rem;
    border-bottom: 1px solid #E5E5E5;
     overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
}
.info::before{
    content: ''; display: inline-block;vertical-align: middle; height: 100%;
}
.name{
    font-size: 0.32rem; display: inline-block; vertical-align: middle;
}
.teacher{
    color: #FF3A45; display: inline-block;
}
.letter-list{
    position: fixed; right: 0.1rem; top: 1.2rem;
}
.letter-item{
    font-size: 0.20rem; color: #333; padding: 0.05rem;
    text-align: center;
}
.letter-item.active{
    background: #128FEF;color: #fff; border-radius: 50%;
}
</style>
